@extends('admin.layouts.common')

@section('Main')
<el-card class="box-card box-card-full">
	<div slot="header">
		<span class="span-primary"><i class="fa fa-list"></i></span>
		{{$nowNode->name}}
	</div>
	<div class="el-card-ct">
		<el-form :inline="true" class="search-table-form">
			<el-form-item>
				<el-input
					placeholder="请输入搜索内容"
					clearable="true"
					prefix-icon="el-icon-search"
					v-model="searchText">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="info" plain @click="getTable">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" stripe="true" border>
			<el-table-column align="center" prop="id" label="ID"></el-table-column>
			<el-table-column align="center" prop="name" label="角色名称"></el-table-column>
			<el-table-column prop="operate" label="操作">
				<template slot-scope="scope">
					<el-button
						@click="editRow(scope.row)"
						size="small" plain type="success"
						icon="el-icon-edit">
					</el-button>
					<el-button
						@click="delRow(scope.row)"
						size="small" plain 	type="danger"
						icon="el-icon-delete">
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-page">
			<el-pagination
				@size-change="pageSizeChange"
				@current-change="curPageChange"
				:current-page="pageNumber"
				:page-sizes="[10, 20, 50, 75]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tableTotal">
			</el-pagination>
		</div>
	</div>
</el-card>
<script type="text/javascript">
var Main = new Vue({
	el:"#Main",
	data:{
		token:"{{ csrf_token() }}",
		tableData:'',
		searchText:'',
		pageSize:10,
		pageNumber:1,
		tableTotal:0,
	},
	mounted:function(){
		this.getTable();
	},
	methods:{
		getTable(){
			var param = {
				pageSize:this.pageSize,
				pageNumber:this.pageNumber,
				searchText:this.searchText,
				_token:this.token
			}
			$.post('./index',param,function(res){
				if(res.code == 1){
					Main.$message({message:res.msg,type:'success'});
					Main.tableData = res.data.rows;
					Main.tableTotal = res.data.total;
				}else{
					Main.$notify.error({title:'失败',message:res.msg});
				}
			})
		},
		pageSizeChange(val) {
			this.pageSize = val;
			this.getTable();
		},
		curPageChange(val) {
			this.pageNumber = val;
			this.getTable();
		},
		editRow(row) {

		},
		delRow(row) {

		}
	}
})
</script>
@endsection
